<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MdiWin Demo - edit</title>
    <uieip type="file" value="inc" src="/yqwin/easyui/include.txt" cache="true" minute="1440"></uieip>
    <uieip type="file" value="css" src="/yqwin/css/yqwin.min" cache="false"></uieip>
    <uieip type="file" value="js" src="/yqwin/data/yqwin.min" cache="false"></uieip>
    <style>
        body {
            padding: 10px;
        }
    </style>
</head>

<body>
    <button class="easyui-linkbutton" onclick="openwin(this);">openwin</button>
    <button class="easyui-linkbutton" onclick="closewin();">closewin</button>
    <h1>PropGrid</h1>
    <table id="pg" style="width:300px"></table>
    <br />
    <button class="easyui-linkbutton" onclick="group();">group test</button>
    <button class="easyui-linkbutton" onclick="check();">check</button>
    <script>
        $(function () {
            var data = {
                "rows": [
                    { "name": "Name", "value": "Bill Smith", "group": "ID Settings", "editor": "textbox" },
                    { "name": "Address", "value": "", "group": "ID Settings", "editor": "text" },
                    { "name": "SSN", "value": "123-456-7890", "group": "ID Settings", "editor": "text" },
                    {
                        "name": "Email", "value": "bill@gmail.com", "group": "Marketing Settings", "editor": {
                            "type": "validatebox",
                            "options": {
                                "validType": "email"
                            }
                        }
                    },
                    { "name": "my-text", "value": "123-456-7890", "group": "Marketing Settings", "editor": "my_text" },
                ]
            };


            $('#pg').propertygrid({
                columns: [[
                    {
                        field: 'name', title: '名称', width: 80
                    }, {
                        field: 'value', title: '值', width: 150
                    }
                ]],
                width: 500,
                //url: 'get_data.php',
                showGroup: true,
                groupField: "group",
                // groupFormatter:function(group,rows){
                //     console.log(group,rows);  
                // },
                scrollbarSize: 0
            });

            $('#pg').propertygrid("loadData", data);


            // var opt = {
            //     ajaxUrl: "_db.html",
            //     dbname: "yqbase",                //数据库
            //     tbname: "",                       //表
            //     tempno: "-1"
            // };

            // $.yqTbTitle(opt, function (res) {
            //     console.log("$.yqTbTitle", res);
            //     if (res.error == 0) {
            //         var titles = $.yqFmUiTitle(res.titles);
            //         console.log("titles", titles);
            //     }
            // })
        });

        function group() {
            var gg = $('#pg').propertygrid("groups");
            console.log("gg", gg);
            var rows = $('#pg').propertygrid("getRows");
            console.log("getRows", rows);
        }

        $.extend($.fn.datagrid.defaults.editors, {
            my_text: {
                init: function (container, options) {
                    var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
                    return input;
                },
                destroy: function (target) {
                    $(target).remove();
                },
                getValue: function (target) {
                    return $(target).val();
                },
                setValue: function (target, value) {
                    $(target).val(value);
                },
                resize: function (target, width) {
                    $(target)._outerWidth(width);
                }
            }
        });

        function check() {
            window.parent.$MidWin.yqFormMdi("editwin", {
                id: "",
                title: 'edit',
                openmore: true,
                content: '<button onclick="addmenu();">menu</button><button onclick="addedit();">edir</button>',
                url: "desktop.html",
                closable: true,
            })
        }

        function openwin(event) {
            var prevent_e = $.getPreventDefault($("#btn_win"));
            var mdiinfo = $.yqGetWindParams();
            var w_ = $(document).width() - 20;
            var h_ = $(document).height() - 20;

            var opt = {
                prevent_e: prevent_e,
                mdiinfo: mdiinfo,
                title: "Dialog",
                width: w_,
                height: h_,
                buttons: [],
                showTitle: true,
                closeBtn: true,
                closeBtnText: $.fn.yqUiExtText.btnNo,
                iframe: true,
                iframeUrl: "/yqwin/demo/desktop.html",
                onOpen: function ($body) {
                    //console.log("$body", $body);
                },
            };

            if (window.top == window.self) {
                $.yqDialog(opt);
            }
            else {
                window.top.$.yqDialog(opt);
            }
        }

        function closewin() {
            $.yqDialog_fun('close');
        }
    </script>
</body>

</html>